import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          colorScheme: const ColorScheme(
              primary: Colors.redAccent, //按钮字体颜色
              surfaceVariant: Colors.orange,
              secondary: Colors.yellowAccent,
              background: Colors.white, //整个页面背景色
              error: Colors.red,
              brightness: Brightness.light,
              onBackground: Colors.green, //边框按钮边框颜色
              outlineVariant: Colors.amber,
              onError: Colors.yellow,
              onPrimary: Colors.redAccent,
              onSecondary: Colors.blueAccent,
              onSurface: Color.fromARGB(255, 54, 54, 184),
              surface: Colors.blue) //整个标题栏颜色
          // primarySwatch: Colors.blue, // 设置主色调,无效，怎么设都是白色
          ),
      home: Scaffold(
        appBar: AppBar(title: const Text("P27"), centerTitle: true),
        body: const LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  const LayoutDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
                onPressed: () {
                  print("普通按钮");
                },
                child: const Text("普通按钮")),
            TextButton(
                onPressed: () {
                  print("文本按钮");
                },
                child: const Text("文本按钮")),
            OutlinedButton(
                onPressed: () {
                  print("边框按钮");
                },
                child: const Text("边框按钮")),
            IconButton(
                onPressed: () {
                  print("图标按钮");
                },
                icon: const Icon(Icons.thumb_up_alt))
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        Row(
          //带图标按钮
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.send),
              label: const Text("send"),
            ),
            TextButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.info),
              label: const Text("info"),
            ),
            OutlinedButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.add),
              label: const Text("add"),
            )
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            ElevatedButton.icon(
              style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all(Colors.cyanAccent), //背景颜色
                  foregroundColor:
                      MaterialStateProperty.all(Colors.yellow)), //文字、图标颜色
              onPressed: () {},
              icon: const Icon(Icons.send),
              label: const Text("send color"),
            ),
            TextButton.icon(
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.blueGrey),
                  foregroundColor: MaterialStateProperty.all(Colors.white)),
              onPressed: () {},
              icon: const Icon(Icons.info),
              label: const Text("info color"),
            ),
            OutlinedButton.icon(
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.lightGreen),
                  foregroundColor: MaterialStateProperty.all(Colors.orange)),
              onPressed: () {},
              icon: const Icon(Icons.add),
              label: const Text("add color"),
            )
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            SizedBox(
              height: 60,
              width: 200,
              child: ElevatedButton(
                  style: ButtonStyle(
                      foregroundColor: MaterialStateProperty.all(Colors.white)),
                  onPressed: () {
                    print("big");
                  },
                  child: const Text("big")),
            ),
            SizedBox(
              height: 60,
              width: 200,
              child: ElevatedButton.icon(
                icon: const Icon(Icons.search),
                style: ButtonStyle(
                    foregroundColor: MaterialStateProperty.all(Colors.white)),
                onPressed: () {
                  print("search");
                },
                label: const Text("search"),
              ),
            )
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        //自适应按钮
        Row(
          children: [
            Expanded(
                flex: 1,
                child: Container(
                    margin: const EdgeInsets.only(left: 20, right: 20),
                    height: 80,
                    child: ElevatedButton(
                      style: ButtonStyle(
                          backgroundColor:
                              MaterialStateProperty.all(Colors.red),
                          foregroundColor:
                              MaterialStateProperty.all(Colors.white)),
                      onPressed: () {
                        print("login");
                      },
                      child: const Text("外加Container或SizedBox，自适应宽高"),
                    )))
          ],
        ),
        const SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
                style: ButtonStyle(
                    shape: MaterialStateProperty.all(RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)))),
                onPressed: () {},
                child: const Text("圆角按钮")),
            SizedBox(
                height: 80,
                width: 80,
                child: ElevatedButton(
                    style: ButtonStyle(
                        shape: MaterialStateProperty.all(const CircleBorder(
                            side: BorderSide(color: Colors.yellow, width: 3)))),
                    onPressed: () {},
                    child: const Text("圆形按钮")))
          ],
        ),
        const SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            OutlinedButton(
                style: ButtonStyle(
                    side: MaterialStateProperty.all(
                        const BorderSide(width: 1, color: Colors.red))),
                onPressed: () {},
                child: const Text("带边框按钮"))
          ],
        )
      ],
    );
  }
}
